Cascading Style Sheet support in Amaya

1^st July 1996

This document describes the current state of the Cascading Style Sheet support in Amaya. The implementation is based on the latest (18 Apr 96) CSS1 proposal by Håkon W. Lie and Bert Bos from the W3 Consortium. We focussed on providing as many features as possible and offering an easy to use and learn interface. Considering the second point we choosed a "learn by example" approach suitable for users not experienced with style sheets.

This document contains the following sections:

1. Section "Presentation" gives a short overview of the CSS.
2. Section "Interface" details the CSS specific areas of the Amaya interface.
3. Section "Current State" presents the CSS functionnalities that are currently implemented.
4. Section "What's lacking" explains the main points to be improved or added.
5. Section "What's next" is for future plans.

Presentation

CSS defines a syntax to describe presentation associated with elements as a set of properties (like colors, fonts, etc.). Associated to properties, a selector restrict the application of these rules to a set of element depending on their type (like H1, or LI), their context (like an EM in a H3) or classes applied to an element. A set of rules defines which properties should be applied when more than one selector match a given element. While this is relatively simple for someone used to handle structured documents, the experience has shown that a new user may have difficulties to modelize a document as a structured entity. This might be a problem when trying to introduce the CSS to a large audience.

Thus, the challenge is to build a tool simple enough so that inexperienced people can use styles when creating HTML pages with Amaya, while retaining all the possibilities of CSS. The interface was also designed to not hide the underlying complexity of the document structure (Structure View) and of the CSS language (CSS rules may be shown), in order to shorten the learning curve to structured presentation design.

One of the strongest features of CSS is the cascading model. Presentation rules can be fetched from different remote files, tied to the document or associated to one specific element in a page. This allows sharing and reuse of sets of rules whilst allowing specific presentation. It allows also the use of an user defined set of rules to accomodate his preferences. We tried to give a complete and simple view of the cascading model, showing separately specific presentation (Structure View), document specific rules (Structure View and CSS dialog box) and all the set of rules associated to the external files referenced by the document. It is possible to manipulate rules in one file but also to move them from one file to another, allowing a user to take presentation rules from a remote server and apply them selectively to his own pages, in the purpose of building a pool of presentation rules.

User interface

We first present the Style interface as provided by the current version of Amaya:

The Amaya menu bar contains a Style menu containing all the actions related to presentation and style manipulation. Entries in that menu are ordered from the most specific to the most generic operations, except the two last ones, which are not related to CSS, but to HTML (Information type and Character element).

• Three entries call dialog boxes that associate presentation with the currently selected elements:
  • Character Style allows one to select font attributes (size, style, family and underline)
  • Colors allows one to choose the foreground and background colors from a palette.
  • Format allows one to set alignment, indentation, justification and linespacing.
  • Background Image allows one to insert a background image and to select the repeat mode.

  All modifications made with these dialog boxes can be viewed immediately in the WYSIWYG view and the Structure view.

• Two entries are related to classes:
  • Create Rule uses the style of the selected element to define a new class with the same. A list of the existing classes is proposed, the type of the current element being the default. This is the first step toward defining CSS rules. Presentation is moved from the selected element to the document header, defining a new CSS rule. All elements of the new class take the new style.
  • Apply class uses one of the existing classes and applies it to the selected elements. These elements are then displayed with the style associated with class chosen.
• The Style sheet item gives access to the CSS dialog box:

  

  • The two CSS selectors allow to select CSS files from which rules can be manipulated. In each, the currently selected file is highlighted.
  • The two rule selectors show the rules extracted from the selected CSS files. Only one rule can be selected for both selector, which is the current rule. All rules are grouped by their selector and only the list of selectors is shown here.
  • The text area at the bottom shows the CSS syntax of the current rule (the one selected from the above selectors), allowing the user to see the CSS syntax. This is an editable field allowing the user to modify the current rule.
  • Between the two Rule Selectors there is a column of 5 buttons.
    • pushing the button merges the current rule (as shown in the text area) to the second file. Changes are immediately reflected in the WYSIWYG View.
    • pushing the button copies the current rule to the second file.The difference with the previous button is that all rules using the same selector initially present in the file are first removed.
    • pushing the button deletes the current rule.
    • the buttons and have the same effect as the first two buttons but they act on the first file.
  • The five buttons at the bottom are used for operations at the CSS file level.
    • Save initiates the operation of saving all modified CSS files.
    • Save as saves one of the CSS to a local file.
    • Reload is a coarse grained Undo. It reloads all the modified CSS files referenced by the document.
    • New adds an external CSS file to the list of the external style sheet referenced by the document. It is also possible to browse the content of a file without attaching it to the document. Amaya keeps an history of the CSS files encountered. This history is saved from session to session, and allows to grab quickly one of the CSS lastly referenced, to browse its rules or to attach it to the current document.
    • Remove supresses a reference to an external CSS file.
    • Cancel closes the CSS dialog box.

  There are some additionnal dialogs needed for saving CSS files or selecting them from the history.

Current State

Here, we focus on what is currently supported from the CSS1 proposal:

• Parsing:
  • all the basic:
    • grouping selectors in one rule
    • grouping properties in one rule
    • comments (in external CSS files only)
  • classes and pseudoclasses
  • context sensitive selector
  • standard units
• Cascading order should be fine.
• CSS properties: Everything should be parsed correctly, but the back-end may lack support for some attributes
  • Font: all should be supported to some extend, except the generic "font" used to group properties.
  • Color: a list of approximately 500 predefined color names is here. Parsing of #RGB is available too. But the set of colors available is limited. The notation rgb(r,g,b) is not yet supported.
  • Text: text-align, text-decoration and text-indent.
  • Fonts: Times, Helvetica and Courrier are available, with various character style and a set of prefefined size (from 6 to 60 points).
  • Box Properties: not supported in this version. However, a bit of support is provided for margin-xxxx properties but not well tested.
  • Magnification is here, perfect for "Users Preference" style.

There is support for users preferences which can be provided at a site level in Thot/$PLATFORM/amaya.css, or specified by the user in $(HOME)/.amaya.css . Here is an example of an amaya.css file.

The CSS history is stored in $(HOME)/.amaya/history.css and contains the 50 last CSS files loaded by Amaya.

What's lacking

First, considering the current draft compliance, the main issues for full CSS1 support are:

• The Print command does not currently render presentation defined in style sheets. This problem will be fixed in the next release.
• The CSS1 formatting model for border, margins and padding is not yet implemented.
• A few differences with the CSS1 specification may appear in the cascading order.
• Pseudo elements are difficult to handle, since these are not elements and cannot be added at parsing time, first lines for example are computed lately, and hence could not be easily added as attributes on the structure.
• The current implementation is a bit restrictive on colors and fonts:
  • Amaya should support the full RGB color spectrum instead of using a set of pre-allocated colors.
  • more fonts, small-caps, cursive, fantasy ... are needed.

  The CSS rules produced by Amaya are re-generated from the internal presentation layer, thus when approximations are made at parsing, the HTML output is degraded.

Considering the user interface, one of the main problems style sheet writers will be faced to is the reverse problem induced by the inheritance complexity:

Beginner's question: How do I produce xxx kind of input ?

CSS Writer's question: Why did it produce xxx kind of input ?

Suppose that a part of a document doesn't have the expected look, why ? Considering the underneath complexity of the cascading order, when referencing multiples external CSS, one can easily understand that debugging CSS in real-use might be difficult. One nice feature would be to show graphically all the rules applying to an element or a zone, where they came from, and which rules they superceded.

What's Next

Here is a short list of future actions for CSS in Amaya:

• Full CSS1 compliance.
• Improving the interface.